import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { userAPI, uploadAPI } from '../services/api';
import './styles.css';

function UserInfoSetup() {
  const [avatar, setAvatar] = useState('');
  const [nickname, setNickname] = useState('');
  const [bio, setBio] = useState('');
  const [loading, setLoading] = useState(false);
  const [uploadingAvatar, setUploadingAvatar] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  
  const navigate = useNavigate();
  const location = useLocation();
  
  // 从location state中获取userid和是否为编辑模式
  const { userid, isEditing } = location.state || {};
  
  useEffect(() => {
    // 确认有userid，否则重定向到适当页面
    if (!userid) {
      // 如果没有userid且不是编辑模式，则重定向到注册页
      navigate('/register', { state: { error: '用户信息缺失，请重新注册' } });
      return;
    }
    
    // 如果是编辑模式，尝试获取现有用户信息进行预填充
    if (isEditing) {
      fetchUserInfo(userid);
    }
  }, [userid, navigate, isEditing]);
  
  // 获取用户现有信息
  const fetchUserInfo = async (userId) => {
    try {
      setLoading(true);
      const response = await userAPI.getUserInfo({ userId });
      
      if (response && response.result) {
        // 预填充表单
        const userInfo = response.result;
        if (userInfo.nickName) setNickname(userInfo.nickName);
        if (userInfo.avatar) setAvatar(userInfo.avatar);
        if (userInfo.selfIntro) setBio(userInfo.selfIntro);
      }
    } catch (err) {
      console.error('获取用户信息失败:', err);
      setError('无法加载用户信息，请稍后再试');
    } finally {
      setLoading(false);
    }
  };

 
  // OSS 配置常量


  // 处理头像上传
  const handleAvatarChange = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    // 验证文件类型
    if (!file.type.startsWith('image/')) {
      setError('请选择图片文件');
      return;
    }

    // 验证文件大小（限制为5MB）
    const maxSize = 5 * 1024 * 1024;
    if (file.size > maxSize) {
      setError('图片文件大小不能超过5MB');
      return;
    }

    try {
      setUploadingAvatar(true);
      setError('');

      // 调用上传API
      const response = await uploadAPI.uploadFile(file, 'Public', 'image');
      console.log('上传响应:', response);
      if (response && response.result.keyView) {
        // 上传成功，设置头像URL
        setAvatar(response.result.keyView);
        setSuccess('头像上传成功！');
        
        // 清除成功消息
        setTimeout(() => {
          setSuccess('');
        }, 3000);
      } else {
        throw new Error('上传响应格式错误');
      }
    } catch (err) {
      console.error('头像上传失败:', err);
      let errorMessage = '头像上传失败: ';
      if (err.response) {
        errorMessage += err.response.data?.message || JSON.stringify(err.response.data) || '';
      } else if (err.request) {
        errorMessage += '服务器未响应';
      } else {
        errorMessage += err.message || '未知错误';
      }
      setError(errorMessage);
    } finally {
      setUploadingAvatar(false);
    }
  };

  // 提交用户信息
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setSuccess('');
    
    try {
      // 构建用户信息数据
      const userInfoData = {
        userId: userid,
        nickName: nickname || '深海大茄子', // 如果没有设置昵称，使用默认值
        avatar,
        memberFlag: 0, // 默认值
        articleCount: 0, // 默认值,感觉一定会改的
        selfIntro: bio || '这人很懒，什么都没有留下'
      };
      // 调用API保存用户信息
      console.log('提交的用户信息:', userInfoData);
      const response = await userAPI.saveUserInfo(userInfoData);
      
      // 处理响应
      if (response) {
        setSuccess('个人信息保存成功！');
        
        // 延迟跳转到登录页
        setTimeout(() => {
          navigate('/dashboard', {
            state: {
              userData:userInfoData,
              message: isEditing ? '个人信息修改成功' : '注册并设置个人信息成功',
            }
          });
        }, 1500);
      }
    } catch (err) {
      console.error('保存用户信息出错:', err);
      // 错误处理
      let errorMessage = '保存失败: ';
      if (err.response) {
        errorMessage += err.response.data?.message || JSON.stringify(err.response.data) || '';
      } else if (err.request) {
        errorMessage += '服务器未响应';
      } else {
        errorMessage += err.message || '未知错误';
      }
      
      setError(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-container">
      <div className="auth-card">
        <h2>{isEditing ? '修改个人信息' : '完善个人信息'}</h2>
        
        {error && <div className="error-message">{error}</div>}
        {success && <div className="success-message">{success}</div>}
        
        <form onSubmit={handleSubmit}>
          {/* 头像上传 */}
          <div className="form-group">
            <label>头像</label>
            <div className="avatar-upload">
              {avatar && (
                <div className="avatar-preview">
                  <img src={avatar} alt="预览头像" />
                </div>
              )}
              <input
                type="file"
                accept="image/*"
                onChange={handleAvatarChange}
                className="file-input"
                disabled={uploadingAvatar}
              />
              <button 
                type="button" 
                className="btn-secondary file-button"
                onClick={() => document.querySelector('.file-input').click()}
                disabled={uploadingAvatar}
              >
                {uploadingAvatar ? '上传中...' : '选择图片'}
              </button>
            </div>
          </div>
          
          {/* 昵称 */}
          <div className="form-group">
            <label htmlFor="nickname">昵称</label>
            <input
              type="text"
              id="nickname"
              value={nickname}
              onChange={(e) => setNickname(e.target.value)}
              placeholder="请输入昵称（可选）"
            />
          </div>
          
          {/* 自我介绍 */}
          <div className="form-group">
            <label htmlFor="bio">自我介绍</label>
            <textarea
              id="bio"
              value={bio}
              onChange={(e) => setBio(e.target.value)}
              placeholder="请输入自我介绍（可选）"
              rows="3"
            />
          </div>
          
          <div className="form-actions">
            <button 
              type="submit"
              className="btn-primary"
              disabled={loading || uploadingAvatar}
            >
              {loading ? '保存中...' : isEditing ? '保存修改' : '保存并继续'}
            </button>
            
            <button
              type="button"
              className="btn-secondary"
              onClick={() => navigate('/dashboard')}
            >
              {isEditing ? '返回仪表板' : '跳过此步骤'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default UserInfoSetup;
